<template>
  <el-card class="config">
    <template #header>
      <div class="config-header">
        <span>配置管理</span>
        <el-input
          v-model="params.keyword"
          placeholder="请输入配置项翻译进行查询"
          clearable
          style="width:280px"
          @clear="getList"
        >
          <template #append>
            <div
              class="iconfont icon-search config-search"
              @click="onSearch"
            ></div>
          </template>
        </el-input>
        <div class="config-opts">
          <el-button @click="addConfig">
            新增
          </el-button>
        </div>
      </div>
    </template>
    <ev-table
      :data="tableData"
      :table-config="config.tableConfig"
      :pag-config="params"
    >
      <template #configValue="scope">
        <el-tooltip
          placement="top-start"
        > 
          <template #content>
            <div style="overflow: auto;max-width:300px;max-height: 200px;">
              {{ scope.row.configValue }}
            </div>
          </template>
          <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ scope.row.configValue }}</div>
        </el-tooltip>
      </template>
      <template #opt="{row}">
        <el-link
          type="primary"
          size="small"
          @click="onEdit(row)"
        >
          编辑
        </el-link>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-popconfirm
          title="确定要删除吗?"
          confirm-button-text="确定"
          cancel-button-text="取消"
          @confirm="onDelete(row)"
        >
          <template #reference>
            <el-link
              type="danger"
              size="small"
            >
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ev-table>
  </el-card>
  <el-dialog
    v-model="dialogShow"
    :title="type == 'add' ? '新增配置':'编辑配置'"
    width="30%"
    :lock-scroll="false"
    draggable
    align-center
    center
    @close="onCancel"
  >
    <el-form
      ref="form"
      :model="formData"
      label-width="100px"
    >
      <el-form-item
        prop="configType"
        label="配置类别"
      >
        <el-radio-group v-model="formData.configType">
          <el-radio
            v-for="item in configTypeList"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        prop="configLabel"
        label="配置项"
      >
        <el-input
          v-model="formData.configLabel"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        prop="configValue"
        label="配置值"
      >
        <el-input
          v-model="formData.configValue"
          type="textarea"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        prop="description"
        label="配置描述"
      >
        <el-input
          v-model="formData.description"
          type="textarea"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button
          type="primary"
          @click="onSave"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup name="configManage">
import api from './service/api'
import config from './config/index'
import { reactive, toRefs, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import commonApi from '@/api/common/index'

interface conf{
  configValue:string,
  configLabel:string,
  configType:'sys'|'other',
  time?: string,
  description: string,
  id?:number
}
const params = reactive({
    pageNumber: 1,
    pageSize: 10,
    keyword: '',
    total: 0,
    show: true,
})
const form = ref<FormInstance>()
const configTypeList = reactive([])
const tableData = ref([])
const configDised = ref(false)
const onSearch = () => {
    params.pageNumber = 1
    getList()
}
const getList = () => {
    api.getConfigList(params)
    .then(res => {
        const { code, data, msg } = res
        if (code == 0) {
            tableData.value = data.data
            params.total = data.pagination.total
        } else {
            this.$message.error(msg)
        }
    })
}
const addConfig = () => {
    type.value = 'add'
    dialogShow.value = true
}
const onEdit = (data) => {
    Object.assign(formData, data)
    type.value = 'edit'
    dialogShow.value = true
}
commonApi.getDict('configType')
.then(res => {
    const { code, data, msg } = res
    if (code == 0) {
        Object.assign(configTypeList, data)
    }
})
const dialogShow = ref(false)
const type = ref('add')
const formData = reactive<conf>({
    configLabel: '',
    configValue: '',
    description: '',
    configType: 'other',
})
const onCancel = () => {
    reset()
    dialogShow.value = false
}
const onSave = () => {
    if (type.value == 'add') {
        delete formData.id
        api.saveConfig(formData)
        .then(res => {
            const { code, data, msg } = res
            if (code == 0) {
                reset()
                dialogShow.value = false
                ElMessage.success(msg)
                getList()
            } else {
                ElMessage.error(msg)
            }
        })
    } else {
        api.updateConfig(formData)
        .then(res => {
            const { code, data, msg } = res
            if (code == 0) {
                reset()
                dialogShow.value = false
                ElMessage.success(msg)
                getList()
            } else {
                ElMessage.error(msg)
            }
        })
    }
}
const onDelete = (data:conf) => {
    const { id } = data
    api.deleteConfig({ id })
    .then(res => {
        const { code, data, msg } = res
        if (code == 0) {
            ElMessage.success(msg)
        } else {
            ElMessage.error(msg)
        }
        getList()
    })
}
const reset = () => {
    Object.assign(formData, {
        configLabel: '',
        configValue: '',
        description: '',
        configType: 'other',
    })
}
onMounted(() => {
    getList()
})
</script>
<style scoped lang='scss'>
.config{
  .config-header{
    display: flex;
    justify-content: space-between;
    .config-search{
      cursor: pointer;
    }
  }

}
</style>